<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>
    <link rel="stylesheet" href="../css/zcdl.css">
    <link rel="stylesheet" href="../css/font/iconfont.css">
</head>

<body>
    <div id="zhuce">
        <p><i class="iconfont icon-Nike"></i></p>
        <h2>注册NIKE账号</h2>
        <input type="text" placeholder="用户名" id="username">
        <br>
        <span class="yanzhen1">用户名格式请以大写字母开头</span>
        <br>
        <input type="password" placeholder="密码" id="password">
        <br>
        <span class="yanzhen2"></span>
        <p style="margin-left: -158px;">使用电子邮箱登录。</p>
        <p style="font-size: 14px;"><input type="checkbox"><label
                for="">保持登录状态</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>忘记密码？</span>
        </p>
        <p style="font-size: 12px;color: rgb(80, 79, 79);">一旦登录，即表明你同意Nike的隐私政策和使用条例</p>
        <button>注册</button>
    </div>
</body>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/dy.js"></script>
<script>
    // $('button').click(function () {
    //     var username = $('#username').val();
    //     var password = $('#password').val();
    //     APIzhuce({ username, password }).then(data => {
    //         var { code, msg } = data;
    //         if (code) {
    //             alert(msg);
    //             location.href = 'http://127.0.0.1:5500/project/html/denglu3.html'
    //         } else {
    //             alert(msg);
    //         }
    //     })
    // })
    
    $('#username').change(function () {
        var username = $('#username').val();
        // var username = '';
        var reg = /^[A-Z]\w{7,12}$/;
        // console.log(reg.test(username));
        // if(username){
        //     console.log(666);
        // }else{
        //     console.log(777);
        // }
        if (username) {
            if (reg.test(username)) {
                $('.yanzhen1').html('<span style="color:green;">用户名可用</span>');
            } else {
                $('.yanzhen1').html('<span style="color:red;">用户名为大写开头的8位字符</span>');
            }
        }else{
            $('.yanzhen1').html('<span style="color:red;">用户名不能为空</span>');
        }
    })
    $('#password').change(function () {
        var password = $('#password').val();
        var reg = /^\w{6,9}$/;
        if ($('#username').val() == password) {
            $('.yanzhen2').html('<span style="color:red;">密码与用户名一致</span>');
        } else {
            if (reg.test(password)) {
                $('.yanzhen2').html('<span style="color:green;">密码可用</span>');
                $('button').click(function () {
                    var username = $('#username').val();
                    var password = $('#password').val();
                    APIzhuce({ username, password }).then(data => {
                        var { code, msg } = data;
                        if (code) {
                            alert(msg);
                            location.href = './3denglu.html';
                        } else {
                            alert(msg);
                        }
                    })
                })
            } else {
                $('.yanzhen2').html('<span style="color:red;">密码长度为6位</span>');
            }
        }
    })
</script>

</html>